<template>
	<view class='home' :style="{'top':top + 'px'}" @touchmove="setTouchMove">
		<view class='homeCon bg-color acea-row row-column-between' :class="homeActive==true?'on':''">
			<view hover-class='none' @tap="gotoPage(1)" url='/pages/index/index' open-type='switchTab' class='iconfont icon-shouye-xianxing'></view>
			<view hover-class='none' @tap="gotoPage(2)" url='/pages/cart/cart' open-type='switchTab' class='iconfont icon-caigou-xianxing'></view>
			<view hover-class='none' @tap="gotoPage(3)"  url='/pages/ucenter/index/index' open-type='switchTab' class='iconfont icon-yonghu1'></view>
		</view>
		<view class='pictrue' @tap='open'>
			<image :src='homeActive==false?"/static/images/close.gif":"/static/images/open.gif"'></image>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				homeActive: false,
				top:0,
			};
		},mounted() {
			this.top = this.screenHeight/2;
		},
		methods: {
			setTouchMove: function(e) {
				var that = this;
				if (e.touches[0].clientY < 400 && e.touches[0].clientY > 66) {
					that.	top= e.touches[0].clientY;
				}
			},
			open: function() {
					this.homeActive= !this.homeActive;
					
			},gotoPage(pageType){
				var url = "../../pages/index/index";
				switch(pageType){
					case 1:
					url = "../../pages/index/index";
					break;
					case 2:
					url = "../../pages/cart/cart";					
					break;
					case 3:
					url = "../../pages/ucenter/index/index";
					break;
				}
				uni.switchTab({
					url:url
				})
			}
		}
	}
</script>

<style>
	.home {
		position: fixed;
		top: 580rpx;
		color: white;
		text-align: center;
		z-index: 99;
		right: 10rpx;
		color: #000000;
	}

	.home .homeCon {
		width: 86rpx;
		border-radius: 50rpx;
		padding: 34rpx 0;
		box-sizing: border-box;
		transition: all 0.3s ease-in-out 0s;
		opacity: 0;
		transform: scale(0);
		height: 0rpx;
		color: #e93323;
	}

	.home .homeCon.on {
		opacity: 1;
		transform: scale(1);
		height: 300rpx;
		color: #fff;
	}

	.home .homeCon .iconfont {
		font-size: 48rpx;
	}

	.home .pictrue {
		width: 86rpx;
		height: 86rpx;
		border-radius: 50%;
		margin-top: 20rpx;
	}

	.home .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
</style>
